<template>
    <div class="list-content h100 bg-fff">
        <div>
            <p class="f-fs-20">用户信息</p>

            <div class="df ai-c f-p-20-0 f-fs-14">
                <div class="df ai-c">
                    <span>姓名：</span>
                    <span class="f-w-400">{{ info.lastName }}{{ info.firstName }}</span>
                </div>
                <div class="df ai-c f-ml-20">
                    <span>邮箱：</span>
                    <span class="f-w-400">{{ info.email || '-' }}</span>
                </div>
                <div class="df ai-c f-ml-20 test">
                    <span>手机号：</span>
                    <span class="f-w-400">{{ info.phoneNo || '-' }}</span>
                </div>
            </div>
        </div>

        <div class="f-fs-20 f-p-20-0">文件信息</div>
        <div class="list">
            <TableForm
                :initial-form="form"
                @query="getList"
                :total="total"
                @current-change="currentChange"
                @size-change="sizeChange"
                ref="tableFormRef"
                :showSearchForm="false"
            >
                <template #table>
                    <CommonTable :table-data="list" :max-height="560">
                        <el-table-column
                            prop="contractNumber"
                            label="文件编号"
                            width="230"
                            show-overflow-tooltip
                            fixed
                        />
                        <el-table-column prop="contractName" label="文件名称" min-width="300" show-overflow-tooltip />
                        <el-table-column prop="status" label="状态" width="180">
                            <template #="{ row }">
                                <span v-if="row.status == 1 || row.status == 0" class="df ai-c">
                                    <i class="tag bg-e77 f-mr-05"></i>
                                    <span>签署中</span>
                                </span>
                                <span v-if="row.status == 2" class="df ai-c">
                                    <i class="tag bg-green f-mr-05"></i>
                                    <span>已完成</span>
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="title" label="创建人" width="180">
                            <template #="{ row }">
                                <span>{{ row.createLastName }}{{ row.createFirstName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="createTime" label="创建时间" width="180">
                            <template #="{ row }">
                                <span>{{ getDateTime(Date.parse(row.createTime).toString())[11] }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="updatedDate" label="最新修改时间" width="180">
                            <template #="{ row }">
                                <span>{{ getDateTime(Date.parse(row.updatedDate).toString())[11] }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="signNames" label="签署人" min-width="230" show-overflow-tooltip />
                        <el-table-column prop="title" label="操作" width="100" fixed="right">
                            <template #="{ row }">
                                <span class="f-mr-10 blue pointer" @click="goDetail(row)">查看</span>
                            </template>
                        </el-table-column>
                    </CommonTable>
                </template>
            </TableForm>
        </div>
    </div>
</template>
<script setup lang="ts">
import TableForm from '@/components/TableForm/index.vue';
import CommonTable from '@/components/CommonTable/index.vue';
import { reactive, ref, onMounted } from 'vue';
import api from '@/apis/user';
import { useRouter, useRoute } from 'vue-router';
import { errorTips, getDateTime } from '@/utils/utils';
import { useUserStore } from '@/stores/user';
const userStore = useUserStore();
const $router = useRouter();
const $route = useRoute();

const info = ref<any>({});
const tableFormRef = ref<any>(null);
onMounted(() => {
    info.value = JSON.parse($route.query.queryRow as string) || {};
    getList();
});

// list列表

const form = reactive({
    UserId: '',
    Email: '',
    ContractName: '',
    StartTime: '',
    EndTime: getDateTime(undefined)[8],
    PageIndex: 1,
    PageSize: 50,
    SortField: '',
    SortOrder: '',
});
const list = ref([]);
const total = ref(0);

const getList = () => {
    let json = JSON.parse(JSON.stringify(form));
    json.UserId = info.value.userId;
    json.Email = info.value.email;

    api.contractList(json).then(res => {
        if (!res || res.code != 1) return;
        const { data, count: num } = res.data;
        tableFormRef.value && tableFormRef.value.updateTotal(num);
        list.value = data;
        total.value = num;
    });
};

// 详情

const goDetail = (row: any) => {
    if (!row.signContract) return errorTips('暂无合同文件');

    $router.push({
        query: {
            signContract: `${userStore.config.webApiUrl}/${row.signContract}`,
            snowflakeId: row.snowflakeId,
        },
        path: '/contract-management-detail',
    });
};

const currentChange = (val: number) => {
    form.PageIndex = val;
    getList();
};

const sizeChange = (val: number) => {
    form.PageSize = val;
    getList();
};
</script>

<style scoped lang="scss">
.list-content {
    padding: 20px 20px 0 20px;
    border-radius: 10px;
    background-color: #fff;
    .list {
        height: calc(100% - 140px);
    }
}
</style>
